<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>用户列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">


</head>

<body class="gray-bg">
	<div class="tabe_div"  style="padding-right: 0">
        <p class="p_line text_ient" ></p>
        <div style="display: inline" >
            <@shiro.hasPermission name="system:gateway:add">
                <a href="#" class="a_add" id="add_box" onclick="add();">添加</a>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="system:gateway:delete">
            <a href="#" class="a_del" onclick="delMs();" style="margin-right: 150px">删除</a>
            </@shiro.hasPermission>
        </div>
	</div>
    <div class="wrapper wrapper-content  animated fadeInRight">
		<table id="table_list" class="table_style table-striped" style="margin: 0 auto" >
		</table>
	</div>

    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
            // 初始化表格
            initTable();
        });
        function initTable() {
        	//初始化表格,动态从服务器加载数据  
			$("#table_list").bootstrapTable({
			    //使用get请求到服务器获取数据  
			    method: "POST",
			    //必须设置，不然request.getParameter获取不到请求参数
			    contentType: "application/x-www-form-urlencoded",
			    //获取数据的Servlet地址  
			    url: "${ctx!}/admin/gateway/list",
			    //表格显示条纹  
			    striped: true,
			    //启动分页  
			    pagination: true,
			    //每页显示的记录数  
			    pageSize: 10,
			    //当前第几页  
			    pageNumber: 1,
			    //记录数可选列表  
			    pageList: [5, 10, 15, 20, 25],
			    //是否启用查询  
			    search: false,

			    //是否启用详细信息视图
			    detailView:false,
			    //表示服务端请求  
			    sidePagination: "server",
			    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			    //设置为limit可以获取limit, offset, search, sort, order  
			    queryParamsType: 'undefined',
                queryParams: queryParams,
			    //json数据解析
			    responseHandler: function(res) {
			        return {
			            "rows": res.content,
			            "total": res.totalElements
			        };
			    },
			    //数据列
			    columns: [
                    {
                        checkbox: true,
                        width: 30,
                    },
                    {
                        field: 'no',
                        title: '序号',
                        sortable: true,
                        align: "center",
                        //width: 40,
                        formatter: function (value, row, index) {
                            //获取每页显示的数量
                            var pageSize = $('#table_list').bootstrapTable('getOptions').pageSize;
                            //获取当前是第几页
                            var pageNumber = $('#table_list').bootstrapTable('getOptions').pageNumber;
                            //返回序号，注意index是从0开始的，所以要加上1
                            return pageSize * (pageNumber - 1) + index + 1;
                        },
                        width: 50,
                    },
                    {
                        title: "网关ID",
                        field: "identification",
                        width: 100,
                    },
                    {
                        title: "网关名称",
                        field: "name",
                        width: 100,
                    },{
                        title: "网关版本",
                        field: "version",
                        width: 100,
                    },{
                        title: "通信接口",
                        field: "communicationInterface",
                        width: 100,
                    },{
                        title: "备注信息",
                        field: "description",
                        width: 100,
                    },{
                        title: "操作",
                        field: "empty",
                        formatter: function (value, row, index) {
                            var operateHtml = '<@shiro.hasPermission name="system:gateway:edit"><button class="btn btn-primary btn-xs" type="button" onclick="edit(\''+row.id+'\')"><i class="fa fa-edit"></i>&nbsp;修改</button> &nbsp;</@shiro.hasPermission>';
                            operateHtml = operateHtml + '<@shiro.hasPermission name="system:gateway:delete"><button class="btn btn-danger btn-xs" type="button" onclick="del(\''+row.id+'\')"><i class="fa fa-remove"></i>&nbsp;删除</button> &nbsp;</@shiro.hasPermission>';
                            return operateHtml;
                        },
                        width: 100,
                    }]
                });
            }
        
        function edit(id){
        	layer.open({
        	      type: 2,
        	      title: '修改网关信息',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['893px', '450px'],
        	      content: '${ctx!}/admin/gateway/edit/' + id,
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function add(){
        	layer.open({
        	      type: 2,
        	      title: '新增网关信息',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['893px', '450px'],
        	      content: '${ctx!}/admin/gateway/add',
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function del(id){
        	layer.confirm('您确定要删除吗？删除后状态不可恢复', {icon: 3, title:'提示'}, function(index){
        		$.ajax({
    	    		   type: "POST",
    	    		   dataType: "json",
    	    		   url: "${ctx!}/admin/gateway/delete/" + id,
    	    		   success: function(msg){
	 	   	    			layer.msg(msg.message, {time: 2000},function(){
	 	   	    				$('#table_list').bootstrapTable("refresh");
	 	   	    				layer.close(index);
	 	   					});
    	    		   }
    	    	});
       		});
        }

        function delMs(){
            var rows = $("#table_list").bootstrapTable('getSelections');
            if (rows.length== 0) {
                alert("请先选择要删除的记录!");
                return;
            }
            var ids = '';
            for (var i = 0; i < rows.length; i++) {
                ids += rows[i]['id'] + "&";
            }
            ids = ids.substring(0, ids.length - 1);

            layer.confirm('您确定要删除吗？删除后状态不可恢复', {icon: 3, title:'提示'}, function(index){
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "${ctx!}/admin/gateway/deletems/" + ids,
                    success: function(msg){
                        layer.msg(msg.message, {time: 2000},function(){
                            $('#table_list').bootstrapTable("refresh");
                            layer.close(index);
                        });
                    }
                });
            });
        }


        function queryParams(params) {
            return {
                // basic
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                sortName: params.sortName,
                sortOrder: params. sortOrder,
            }
        }

    </script>

    
    

</body>

</html>
